import { createApp, h, ref } from 'vue';
import type { App } from 'vue';
import AlertDialog from '../components/AlertDialog.vue';

interface AlertOptions {
  title?: string;
  message: string;
  iconType?: string;
  confirmText?: string;
  cancelText?: string;
  showCustom?: boolean;
  showConfirm?: boolean;
  showCancel?: boolean;
  closeOnMaskClick?: boolean;
  onConfirm?: () => void;
  onCancel?: () => void;
}

class DialogService {
  private app: App | null = null;
  private container: HTMLElement | null = null;

  alert(options: AlertOptions): Promise<boolean> {
    return new Promise((resolve) => {
      // 创建容器
      this.container = document.createElement('div');
      document.body.appendChild(this.container);

      // 创建应用实例
      this.app = createApp({
        setup() {
          const visible = ref(true);

          const handleClose = () => {
            visible.value = false;
            // setTimeout(() => {
            //   if (this.app) {
            //     this.app.unmount();
            //     this.container?.remove();
            //     this.app = null;
            //     this.container = null;
            //   }
            // }, 200); // 等待动画结束
          };

          const handleConfirm = () => {
            options.onConfirm?.();
            handleClose();
            resolve(true);
          };

          const handleCancel = () => {
            options.onCancel?.();
            handleClose();
            resolve(false);
          };

          return () => h(AlertDialog, {
            visible: visible.value,
            title: options.title || '提示',
            message: options.message,
            iconType: options.iconType || 'ts',
            confirmText: options.confirmText || '去登录',
            cancelText: options.cancelText || '取消',
            showCustom: options.showCustom !== undefined ? options.showCustom : false,
            showConfirm: options.showConfirm !== undefined ? options.showConfirm : true,
            showCancel: options.showCancel !== undefined ? options.showCancel : true,
            closeOnMaskClick: options.closeOnMaskClick !== undefined ? options.closeOnMaskClick : true,
            onClose: handleCancel,
            onConfirm: handleConfirm,
            onCancel: handleCancel
          });
        }
      });

      // 挂载应用
      this.app.mount(this.container);
    });
  }

  confirm(message: string, options?: Omit<AlertOptions, 'message' | 'showCancel'>): Promise<boolean> {
    return this.alert({
      message,
      showCancel: true,
      ...options
    });
  }

  info(message: string, options?: Omit<AlertOptions, 'message' | 'showCancel'>): Promise<boolean> {
    return this.alert({
      message,
      showCancel: false,
      ...options
    });
  }
}

export const dialog = new DialogService();

// Vue插件
export default {
  install(app: App) {
    app.config.globalProperties.$dialog = dialog;
  }
};

// 类型声明
declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $dialog: DialogService;
  }
}